<template>
  <div class="assetDetailsDesc hideScrollBar" ref="scrollEl">
    <!-- 内容部分 -->
    <div class="content">
      <!-- 导航 -->
      <NavBar
        :title="t('airdrop.descTitle')"
        isTransparent
        :scrollEl="scrollEl"
        :navScorllOffset="30"
        navScorllColor="#FFF"
        isFixed
      />
      <!-- 内容 -->
      <div style="padding-top: 20px">
        <div class="content-bg">
          <!-- 幸运值区间 -->
          <div class="group" style="margin-top: 10px">
            <!-- 标题 -->
            <div class="content-box" style="padding: 0">
              <img class="content-box-img" src="/image/pledge/title-icon.svg" />
              <div class="text-title">{{ $t("airdrop.xyzqu") }}</div>
            </div>
            <!-- 表格 -->
            <div
              class="items-center group-row-first col-left-radius col-right-radius"
              style="margin-top: 10px"
            >
              <div class="col-first-row col col-first">
                {{ t("mvp.desc.text3") }}
              </div>
              <div class="col-first-row col col-end">
                {{ t("airdrop.xyz") }}
              </div>
            </div>
            <div class="items-center group-col">
              <div class="col col-first items-center">
                <Images
                  style="width: 32px"
                  src="/image/airdrop/v1-icon.png"
                ></Images>
                <span style="margin-left: 10px">VIP1</span>
              </div>
              <div class="col col-end">10%~65%</div>
            </div>
            <div class="items-center group-col">
              <div class="col col-first items-center">
                <Images
                  style="width: 32px"
                  src="/image/airdrop/v2-icon.png"
                ></Images>
                <span style="margin-left: 10px">VIP2</span>
              </div>
              <div class="col col-end">30%~75%</div>
            </div>
            <div class="items-center group-col">
              <div class="col col-first items-center">
                <Images
                  style="width: 32px"
                  src="/image/airdrop/v3-icon.png"
                ></Images>
                <span style="margin-left: 10px">VIP3</span>
              </div>
              <div class="col col-end">50%~85%</div>
            </div>
            <div
              class="items-center group-col"
              style="
                border-bottom-left-radius: 12px;
                border-bottom-right-radius: 12px;
                overflow: hidden;
                border-bottom-width: 10px;
                padding-bottom: 6px;
              "
            >
              <div class="col col-first items-center">
                <Images
                  style="width: 32px"
                  src="/image/airdrop/v4-icon.png"
                ></Images>
                <span style="margin-left: 10px">VIP4</span>
              </div>
              <div class="col col-end" style="border-bottom: none">60%~99%</div>
            </div>
          </div>
          <!-- 翻倍卡区间 -->
          <div class="group" style="margin-top: 10px">
            <!-- 标题 -->
            <div class="content-box" style="padding: 0">
              <div class="content-box-img">
                <Images src="/image/pledge/title-icon.svg"></Images>
              </div>
              <div class="text-title">{{ $t("airdrop.fbkqu") }}</div>
            </div>
            <!-- 表格 -->
            <div
              class="items-center group-row-first col-left-radius col-right-radius"
              style="margin-top: 10px"
            >
              <div class="col-first-row col col-first">
                {{ t("mvp.desc.text3") }}
              </div>
              <div class="col-first-row col col-end">
                {{ t("airdrop.bv") }}
              </div>
            </div>
            <div class="items-center group-col">
              <div class="col col-first items-center">
                <Images
                  style="width: 32px"
                  src="/image/airdrop/v1-icon.png"
                ></Images>
                <span style="margin-left: 10px">VIP1</span>
              </div>
              <div class="col col-end">1X~3X</div>
            </div>
            <div class="items-center group-col">
              <div class="col col-first items-center">
                <Images
                  style="width: 32px"
                  src="/image/airdrop/v2-icon.png"
                ></Images>
                <span style="margin-left: 10px">VIP2</span>
              </div>
              <div class="col col-end">1X~5X</div>
            </div>
            <div class="items-center group-col">
              <div class="col col-first items-center">
                <Images
                  style="width: 32px"
                  src="/image/airdrop/v3-icon.png"
                ></Images>
                <span style="margin-left: 10px">VIP3</span>
              </div>
              <div class="col col-end">2X~7X</div>
            </div>
            <div
              class="items-center group-col"
              style="
                border-bottom-left-radius: 12px;
                border-bottom-right-radius: 12px;
                overflow: hidden;
                border-bottom-width: 10px;
                padding-bottom: 6px;
              "
            >
              <div class="col col-first items-center">
                <Images
                  style="width: 32px"
                  src="/image/airdrop/v4-icon.png"
                ></Images>
                <span style="margin-left: 10px">VIP4</span>
              </div>
              <div class="col col-end" style="border-bottom: none">2X~10X</div>
            </div>
          </div>
          <!-- 说明内容 -->
          <div
            style="
              border-radius: 12px;
              background-color: #fff;
              padding-bottom: 10px;
            "
          >
            <div v-for="(item, index) in list" :key="index" class="content-box">
              <div class="content-box-img">
                <Images src="/image/pledge/title-icon.svg"></Images>
              </div>
              <div class="text-zw">{{ item }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="assetDetailsDesc">
const { t } = useI18n();
const list = [
  t("airdrop.desc1"),
  t("airdrop.desc2"),
  t("airdrop.desc3"),
  t("airdrop.desc4"),
  t("airdrop.desc5"),
  t("airdrop.desc6"),
  t("airdrop.desc7"),
  t("airdrop.desc8"),
  t("airdrop.desc9"),
];
const scrollEl = ref();
</script>
<style lang="scss" scoped>
.assetDetailsDesc {
  position: relative;
  background-color: #f4f5f7;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;

  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
  padding-bottom: 33 * 2px;

  .content {
    background: linear-gradient(
      180deg,
      #96c9ff 0.07%,
      rgba(226, 236, 255, 0) 99.93%
    );
    background-size: 100vh 250 * 2px;
    background-repeat: no-repeat;
    &-bg {
      margin: 0 15 * 2px;
      border-radius: 12 * 2px;

      padding-bottom: 30px;
    }
    &-box {
      display: flex;
      align-items: flex-start;

      padding: 15 * 2px;
      padding-bottom: 0 * 2px;
      &-img {
        width: 10 * 2px;
        height: 10 * 2px;
        margin-right: 8 * 2px;
        margin-top: 5 * 2px;
      }
    }
  }

  .text {
    &-title {
      color: #141924;
      font-size: 15 * 2px;
      font-weight: 600;
    }
    &-zw {
      flex: 1;
      color: #141924;
      font-size: 13 * 2px;
      line-height: 18 * 2px;
    }
    &-oneline {
      margin-bottom: 18 * 2px;
    }
  }

  .mb10 {
    margin-bottom: 10 * 2px !important;
  }
}
.group {
  margin-bottom: 10 * 2px;
  padding: 15 * 2px 10 * 2px;
  border-radius: 12 * 2px;
  background-color: #fff;
  &-row-first {
    background: linear-gradient(90deg, #007bff 0.34%, #00b2ff 100%);
    background-repeat: no-repeat;
    justify-content: space-around;
  }

  &-text {
    color: #141924;
    font-size: 13 * 2px;
    line-height: 18 * 2px; /* 138.462% */
    letter-spacing: -0.4px;
  }
  &-col {
    justify-content: space-around;
    background-color: #f0f7ff;
  }
  .col {
    width: 200px;
    text-align: center;
    color: #141924;
    font-size: 13 * 2px;
    height: 90px;
    line-height: 90px;
    &-rightview {
      margin-left: 20 * 2px;
      &-title {
        font-size: 13 * 2px;
        color: #141924;
        margin-bottom: 8 * 2px;
        line-height: initial;
      }
      &-bottom {
        width: fit-content;
        padding: 2 * 2px 6 * 2px;
        border-radius: 100px;
        background-color: #dfeeff;
      }
      &-icon {
        width: 14 * 2px;
        height: 14 * 2px;
        margin-right: 5 * 2px;
      }
      &-text {
        font-size: 11 * 2px;
        line-height: initial;
        color: #007bff;
      }
    }
    &-yd {
      margin-left: 30 * 2px;
      width: 38 * 2px;
      height: 38 * 2px;
      // background: #007bff;
    }
    &-first-row {
      background-color: transparent;
      color: #fff;
      font-weight: 590;
    }
    &-first {
      width: 180px;
      justify-content: center;
      // border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    &-left-radius {
      border-top-left-radius: 24px;
    }
    &-center {
      // border-left: 1px rgba(0, 0, 0, 0.1) solid;
      // border-right: 1px rgba(0, 0, 0, 0.1) solid;
      // border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    &-end {
      width: 173 * 2px;
      // border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    &-right-radius {
      border-top-right-radius: 24px;
    }
  }
  .desc {
    color: #999da7;
    font-size: 12 * 2px;
    letter-spacing: -0.2px;
  }
}
</style>
